<template>
  <div class="el-login">
    <div class="el-login-bjbox">
      <div class="el-loginboxs">
        <el-form :model="loginForm"  :rules="loginRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item>
            <h1>分拣配送系统</h1>
          </el-form-item>
          <el-form-item label="账号" prop="username">
            <el-input type="text" tabindex="1" ref="username" name="username" v-model="loginForm.username" auto-complete="on"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" tabindex="2" ref="password" name="password" v-model="loginForm.password" autocomplete="on" @keyup.enter.native="loginin"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.native.prevent="loginin">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { denglu } from "@/utils/api.js"
export default {
  name: "Login",
   data(){
      const validateusername = (rule,value,callback) =>{
        if(value === ''){
          callback(new Error('请输入正确的账号'))
        }else {
          callback()
        }
      }
      const validatePassword = (rule,value,callback) =>{
        if(value.length < 3){
          callback(new Error('密码长度不对'))
        }else {
          callback()
        }
      }
      return {
        username:'',
        password:'',
      
        loginForm:{
          username:'',
          password:''
        },
        loginRules:{
          username:[{validator: validateusername, trigger:'blur',required:true}],
          password:[{validator: validatePassword, trigger:'blur',required:true}]
        },
        // 存储用户名和工号
        userNameInfo:'',
        userJobNumInfo:''
      }
    },
    methods:{
      loginin(){
        this.$refs.ruleForm.validate((valid) =>{
          if(valid) {
            denglu({
              account: this.loginForm.username,
              password: this.loginForm.password,
            }).then((res) => {
              if(res.data.retCode==200){
                this.$Alert({
                  title: "成功",
                  message: '登录成功',
                  type: "success",
                });
                this.userNameInfo = res.data.responseBody.empinfoDTOList[0].empname
                this.userJobNumInfo = res.data.responseBody.empinfoid
                // console.log('登录',res,this.userNameInfo,res.data.responseBody.empinfoDTOList[0].departmentDTOList[0].text)
                sessionStorage.setItem("userName",this.userNameInfo)
                sessionStorage.setItem("userJobNumber",this.userJobNumInfo)
                sessionStorage.setItem("userUnits",res.data.responseBody.empinfoDTOList[0].departmentDTOList[0].text)
                sessionStorage.setItem("userUnitsNumber",res.data.responseBody.empinfoDTOList[0].departid)
                // sessionStorage.setItem("userToken",res.data.userPwd)
                this.$router.push("/menu")
                
                console.log(res)
              } else {
                // alert(res.data.message)
                this.$Alert({
                  title: "错误",
                  message: res.data.message,
                  type: "error",
                });
              }
              
            });
          } else {
            // alert("请输入账号和密码")
            this.$Alert({
                  title: "错误",
                  message: '请输入账号和密码!',
                  type: "error",
                });
            return false;
          }
        })
        
        
      }
    }
};
</script>
<style scoped>
.el-login {
  width: 100vm;
  height: 100vh;
}
.el-login-bjbox {
  width: 100%;
  height: 100%;
  background-image: url("../../../public/img/loginBj.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.el-loginboxs {
  width: 450px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -225px;
  background-color: #FFFFFF;
  border-radius: 6px;
}
.el-form-item {
  margin-bottom: 30px;
}
h1 {
  background: linear-gradient(to right,#1279AF,#2BBFCF);
  -webkit-background-clip: text;
  color: transparent;
  margin-left: -90px;
  margin-top: 5px;
}
.el-input {
  width: 270px;
  height: 30px;
}
.el-button {
  width: 120px;
  height: 40px;
  cursor: pointer;
  background: linear-gradient(to right,#1279AF,#2BBFCF);
  color: #FFFFFF;
  margin-left: 65px;
}
</style>